<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
.detail-item {
  width: 33.333%;
  padding: 8px 12px 8px 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    border-bottom: 1px dotted #ddd;
  }
}
</style>

<template>
    <div>
        <Row>
            <Card style="margin-bottom: 10px;">
                <div slot="title" style="padding: 0 12px;">
                    <h4 style="display: inline-block; margin-right: 8px">{{type}}详情：{{id}}</h4> <Button type="primary" shape="circle" @click="jump2Analysis()" style="display: inline-block; padding: 4px 8px;"><Icon type="medkit"></Icon> </Button>
                </div>
                <div style="padding: 0 12px; display: flex; justify-content: flex-start; flex-wrap: wrap;">
                    <div class="detail-item"><strong>CPU: </strong>{{serviceData[0].CPU}}%</div>
                    <div class="detail-item"><strong>内存: </strong>{{serviceData[0].memory}}%</div>
                    <div class="detail-item"><strong>硬盘IO: </strong>{{serviceData[0].IO.toFixed(2)}} MB/s</div>
                    <div class="detail-item"><strong>访问计数器: </strong>{{serviceData[0].visit_num}}</div>
                    <div class="detail-item"><strong>成功率: </strong>{{serviceData[0].success_rate}}%</div>
                    <div class="detail-item"><strong>访问测试成功率: </strong>{{serviceData[0].visit_test_rate}}%</div>
                    <div class="detail-item"><strong>反应时间: </strong>{{serviceData[0].response_time}} ms</div>
                    <div class="detail-item"><strong>健康度: </strong>{{serviceData[0].health}}</div>
                </div>
            </Card>

            <Card style="min-height: 500px; margin-bottom: 10px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <Tabs :value="tagMode" type="card" style="margin-bottom: 0" @on-click="switchLineTab">
                        <TabPane label="CPU占用" name="CPU"></TabPane>
                        <TabPane label="内存占用" name="mem"></TabPane>
                        <TabPane label="硬盘使用" name="storage"></TabPane>
                        <TabPane label="响应情况" name="response"></TabPane>
                    </Tabs>
                    <div>
                        <Tooltip content="数据下载">
                            <Button type="text" style="padding: 4px 4px 0"><Icon type="ios-cloud-download-outline" size="24"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row :gutter="10">
                    <div>
                        <chart :options="selectedOption" style="width: 100%;" auto-resize></chart>
                    </div>
                </Row>
            </Card>

            <Card style="min-height: 200px; margin-bottom: 10px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='android-warning'/>访问测试故障记录</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="testColumns" :data="serviceData[0].app_test_failure" size="small" ref="failureTable"></Table>
                    </Col>
                </Row>
            </Card>

            <Card style="min-height: 200px; margin-bottom: 10px;" v-if="type==='DHCP'">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='folder'/>IP地址池状态</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="DHCPIPColumns" :data="serviceData[0].DHCP_IP" size="small" ref="DHCPTable"></Table>
                    </Col>
                </Row>
            </Card>

            <Card style="min-height: 200px; margin-bottom: 10px;" v-if="type==='DNS'">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='steam'/>DNS测试目标域名</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="DNSTESTColumns" :data="serviceData[0].DNS_test_domain" size="small" ref="DNSTable"></Table>
                    </Col>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import {
  portalData,
  AAAData,
  DNSData,
  DHCPData,
  testColumns,
  DHCPIPColumns,
  DNSTESTColumns
} from "./data/services.js";

import { CPUOption } from "./analysis-data/CPU";
import { memoryOption } from "./analysis-data/memory";
import { storageOption } from "./analysis-data/storage";
import { responseOption } from "./analysis-data/response";

export default {
  name: "AC",
  data() {
    return {
      testColumns,
      DHCPIPColumns,
      DNSTESTColumns,
      type: this.$router.currentRoute.params.type,
      id: this.$router.currentRoute.params.id,
      tagMode: "CPU",
      serviceData: {
        portal: portalData,
        AAA: AAAData,
        DNS: DNSData,
        DHCP: DHCPData
      }[this.$router.currentRoute.params.type],
      CPUOption,
      memoryOption,
      responseOption,
      storageOption
    };
  },
  computed: {
    selectedOption() {
      return {
        CPU: CPUOption,
        mem: memoryOption,
        storage: storageOption,
        response: responseOption
      }[this.tagMode];
    }
  },
  methods: {
    jump2Analysis(value) {
      this.$router.push({
        name: 'event-test',
      });
    },
    switchLineTab(name) {
      this.tagMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.tableCsv.exportCsv({
          filename: "原始数据"
        });
      } else if (type === 2) {
        this.$refs.tableCsv.exportCsv({
          filename: "排序和过滤后的数据",
          original: false
        });
      }
    }
  }
};
</script>
